import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
import { TableColumn } from '@/types/table'
import { intensityTypeOpt,} from '../indexData';

// 表单校验
export const rules = reactive({
  ruleName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
  earthquakeType: [{ required: true, message: '请选择地震类型', trigger: 'change' }],
  templateName: [{ required: true, message: '请选择', trigger: 'change' }],
  expansionDistance: [{ required: true, message: '不能为空', trigger: 'blur' }],
  rangeType: [{ required: true, message: '请选择', trigger: 'change' }],
  // rangeRule: [{ required: true, message: '请选择', trigger: 'change' }],
  layerType: [{ required: true, message: '请选择', trigger: 'change' }],
  magnitude: [{ required: true, message: '不能为空', trigger: 'blur' }],
  extendedRange: [{ required: true, message: '不能为空', trigger: 'blur' }],
  intervalDistance: [{ required: true, message: '不能为空', trigger: 'blur' }],
  intensityType: [{ required: true, message: '不能为空', trigger: 'change' }],
  noExtendedRange: [{ required: true, message: '不能为空', trigger: 'blur' }],

})
export const earthquakeTypeOpt=[
  {
    label: '正式',
    value:'1'
  },
  {
    label: '测试',
    value:'2'
  },
  {
    label: '演练',
    value:'3'
  },
  {
    label: '自动',
    value:'4'
  },
]
export const specialtopicTypeOpt=[
  { label: '上传区域文件',value:'0'},
  { label: '按行政区域选择',value:'1'},
]
export const resultTypeOpt=[
  { label: '上传区域文件',value:'0'},
  { label: '按行政区域选择',value:'1'},
]
export const formColum = [
  // {
  //   label: '规则名称',
  //   field: 'ruleName',
  //   isSearch: true,
  //   form: {
  //     componentProps: {
  //       maxlength:'20',
  //     }
  //   }
  // },
  // {
  //   label: '专题图模板',
  //   field: 'templateName',
  //   form:{
  //     component: 'Select',
  //     componentProps: {
  //         options: resultTypeOpt
  //     }
  //   },
  // },
  // {
  //   label: '震级范围',
  //   field: 'magnitude1',
  //   isSearch: false,
  //   colProps:{
  //     span:12
  //   },
    
  // },
  // {
  //   label: '最大烈度范围',
  //   field: 'intensity1',
  //   isSearch: false,
  //   form:{
  //     colProps:{
  //       span:12
  //     },
  //   }
  // },
  // {
  //   label: '地震类型',
  //   field: 'earthquakeType',
  //   isSearch: false,
  //   formatter: (_: Recordable, __: TableColumn, cellValue: number|string) => {
  //     return earthquakeTypeOpt.find((account) => account.value === cellValue)?.label
  //   },
  //   form: {
  //     component: 'Checkbox',
  //     value:[],
  //     componentProps: {
  //         options: earthquakeTypeOpt
  //     }
  //   }
  // },
  // {
  //   label: '区域外扩距离',
  //   field: 'expansionDistance',
  //   isSearch: false,
  // },

  // {
  //   label: '区域范围',
  //   field: 'rangeType',
  //   isSearch: false,
  //   isTable:false,
  //   form: {
  //     colProps:{
  //       span:24
  //     },
  //     component: 'Radio',
  //     value:0,
  //     componentProps: {
  //         options: specialtopicTypeOpt
  //     }
  //   }
  // },
  {
    label: ' ',
    field: 'rangeRule',
    isSearch: false,
    isTable:false,
    colProps:{
      span:24
    },
    form: {
      colProps:{
        span:24
      },
      component: 'Radio',
      value:null,
      componentProps: {
        options: [
          {
            label: '震中扩展范围',
            value:'1'
          },
          {
            label: '指定图层扩展',
            value:'2'
          }
      ]
      }
    }
  },
]
// CrudSchema：https://doc.iocoder.cn/vue3/crud-schema/
const crudSchemas = reactive<CrudSchema[]>([
  {
    label: '规则名称',
    field: 'ruleName',
    isSearch: true,
    minWidth: 250,
  },
  {
    label: '专题图模板',
    field: 'templateName',
    isSearch: false,
    isTable: false,
    form:{
      component: 'Select',
      componentProps: {
          options: resultTypeOpt
      }
    },
  },
  {
    label: '震级范围',
    field: 'magnitude1',
    isSearch: false,
    form:{
      colProps:{
        span:12
      },
      // component:ElCol,
      // componentProps:{
      //   slots: {
      //     default: (formModel: any) => {
      //       return <ElCol>'ceslkjlka' </ElCol>
      //     }
      //   }
      // }
    },
    
  },
  // {
  //   label: '',
  //   field: 'magnitude2',
  //   isSearch: false,
  //   isTable:false,
  //   form:{
  //     value:'≤',
  //     colProps:{
  //       span:2
  //     },
  //   }
  // }, {
  //   label: '',
  //   field: 'magnitude3',
  //   isSearch: false,
  //   isTable:false,
  //   form:{
  //     value:'≤',
  //     colProps:{
  //       span:2
  //     },
  //   }
  // }, {
  //   label: '',
  //   field: 'magnitude4',
  //   isSearch: false,
  //   isTable:false,
  //   form:{
  //     colProps:{
  //       span:4
  //     },
  //   }
  // },
  {
    label: '最大烈度范围',
    field: 'intensity1',
    isSearch: false,
    form:{
      colProps:{
        span:12
      },
    }
  },
  // {
  //   label: '',
  //   field: 'intensity2',
  //   isTable:false,
  //   isSearch: false,
  //   form:{
  //     value:'≤',
  //     hidden:true,
  //     colProps:{
  //       span:2
  //     },
  //   }
  // },
  // {
  //   label: '',
  //   field: 'intensity3',
  //   isTable:false,
  //   isSearch: false,
  //   form:{
  //     value:'≤',
  //     hidden:true,
  //     colProps:{
  //       span:2
  //     },
  //   }
  // },
  // {
  //   label: '',
  //   field: 'intensity4',
  //   isTable:false,
  //   isSearch: false,
  //   form:{
  //     hidden:true,
  //     colProps:{
  //       span:3
  //     },
  //   }
  // },
  {
    label: '地震类型',
    field: 'earthquakeType',
    isSearch: false,
    formatter: (_: Recordable, __: TableColumn, cellValue: any) => { 
      let arr:any = []
      cellValue&&cellValue.split(',').forEach(item => {
        arr.push(earthquakeTypeOpt.find((account) => account.value === item)?.label)
      })
      return !arr.length?null:arr.join(',')
    },
    form: {
      component: 'Checkbox',
      value:[],
      componentProps: {
          options: earthquakeTypeOpt
      }
    }
  },
  {
    label: '区域外扩距离',
    field: 'expansionDistance',
    isSearch: false,
  },
  {
    label: '专题图模板',
    field: 'templateName',
    minWidth: 220,
    isSearch: false,
    form:{
      hidden:true,
      component: 'Select',
      componentProps: {
          options: resultTypeOpt
      }
    },
  },
  {
    label: '区域范围',
    field: 'rangeType',
    isSearch: false,
    isTable:false,
    form: {
      colProps:{
        span:24
      },
      component: 'Radio',
      value:0,
      componentProps: {
          options: specialtopicTypeOpt
      }
    }
  },
  
  {
    label: ' ',
    field: 'rangeRule',
    isSearch: false,
    isTable:false,
    form: {
      colProps:{
        span:24
      },
      component: 'Radio',
      value:null,
      componentProps: {
        options: [
          {
            label: '震中扩展范围',
            value:'1'
          },
          {
            label: '指定图层扩展',
            value:'2'
          }
      ]
      }
    }
  },
  // {
  //   label: '震级',
  //   field: 'magnitude',
  //   isSearch: false,
  //   isTable:false,
  //   form: {
  //     colProps:{
  //       span:8
  //     },
  //   }
  // },
  // {
  //   label: '图层选择',
  //   field: 'layerType',
  //   isSearch: false,
  //   isTable:false,
  //   form:{
  //     component: 'Select',
  //     componentProps: {
  //         options: [
  //           {
  //             label: '影响场',
  //             value:1
  //           },
  //           {
  //             label: '历史地震',
  //             value:2
  //           },
  //           {
  //             label: '震中距',
  //             value:3
  //           }
  //       ]
  //     }
  //   },
  // },
  // {
  //   label: '扩展范围',
  //   field: 'extendedRange',
  //   isSearch: false,
  //   isTable:false,
  //   form: {
  //     colProps:{
  //       span:8
  //     },
  //   }
  // },
  // {
  //   label: '间隔距离',
  //   field: 'intervalDistance',
  //   isSearch: false,
  //   isTable:false,
  //   form: {
  //     colProps:{
  //       span:8
  //     },
  //   }
  // },
  // {
  //   label: '烈度',
  //   field: 'intensityType',
  //   isSearch: false,
  //   isTable:false,
  //   form: {
  //     component: 'Select',
  //     componentProps: {
  //         options: intensityTypeOpt
  //     }
  //   }
  // },
  // {
  //   label: '未达烈度扩展范围',
  //   field: 'noExtendedRange',
  //   isSearch: false,
  //   isTable:false,
  // },
  {
    label: '操作',
    field: 'action',
    isDetail: false,
    isForm:false
  }
])
export const { allSchemas } = useCrudSchemas(crudSchemas)
